<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({



      title : {
        text: '项目违章类型',
        x:'center'
   
      },
  tooltip: {
    trigger: 'item'
  },
 
  series: [

  
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
    data: [
        { value: 1048, name: '未分类收集建筑垃圾、混入生活垃' },
        { value: 735, name: '擅自倾倒、抛撒、堆放建筑垃圾' },
        { value: 580, name: '未按规定利用或处置建筑垃圾' }
      ],

      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    
  ]


      })
    
    
    
    }
  }
}
</script>
